import React, {Component} from 'react';
import {TextInput, Image, StyleSheet, Text, TouchableOpacity, View,TouchableHighlight } from 'react-native';

export default class Login extends Component {
  render() {
    return (
      <View style={{ flex: 1 ,backgroundColor:'#fff' }}>
          <View style={styles.top_view}>
              <TouchableOpacity onPress={()=>{
                  this.props.navigation.pop();
              }}>
                  <Image resizeMode={'contain'} source={{ uri: 'back' }} style={{ height: 20, width: 20,paddingTop:10,paddingBottom:10}} />
              </TouchableOpacity>
              <TouchableOpacity onPress={()=>{
                  this.props.navigation.pop();
              }}>
                  <Text style={{ fontSize: 16,color: '#000',marginLeft:10 }}>返回</Text>
              </TouchableOpacity>
          </View>
        <Image resizeMode={'contain'} source={{ uri: 'logo_login' }}  style={{ height: 50, width: 200,marginTop:20,marginLeft:15}}/>
          <View style = {{flexDirection: 'row',marginLeft:15,marginRight:15,alignItems:'center',}}>
              <View style={{flex:1,backgroundColor:'#ddd',height:1}} />
              <Text style={{flex:4,marginLeft:5}} >教育部直属 国家211工程重点建设大学</Text>
          </View>
          <View style = {{flexDirection: 'row',marginLeft:15,marginRight:15,alignItems:'center',marginTop:20}}>
              <Text style={{flex:1,marginLeft:10,fontSize:18,color:'#000'}} >账号</Text>
              <TextInput style={{flex: 4, marginLeft: 5,backgroundColor:'#EEE',padding:5}}  placeholder="账号为常用邮箱" underlineColorAndroid='transparent'/>
          </View>
          <View style = {{flexDirection: 'row',marginLeft:15,marginRight:15,alignItems:'center',marginTop:20}}>
              <Text style={{flex:1,marginLeft:10,fontSize:18,color:'#000'}} >密码</Text>
              <TextInput style={{flex: 4, marginLeft: 5,backgroundColor:'#EEE',padding:5}}  placeholder="请输入密码" underlineColorAndroid='transparent'/>
          </View>
          <TouchableHighlight>
            <Text style={{color:'#fff',fontSize:18,marginLeft:15,marginRight:15,marginTop:20,padding:10,backgroundColor:'#AC1E1A',borderRadius: 5,textAlign:'center'}}>登   录</Text>
          </TouchableHighlight>
          <View  style = {{alignItems:'center'}}>
              <Text style={{marginLeft:10,fontSize:18,color:'#AC1E1A',marginTop:20}} >忘记密码</Text>
          </View>

          <View style = {{flexDirection: 'row',marginLeft:15,marginRight:15,marginTop:30,alignItems:'center',}}>
              <View style={{flex:1,backgroundColor:'#ddd',height:1}} />
              <Text style={{marginLeft:10,marginRight:10}} >快捷登录</Text>
              <View style={{flex:1,backgroundColor:'#ddd',height:1}} />
          </View>
          <View style = {{flexDirection: 'row',marginLeft:15,marginRight:15,justifyContent:'space-around',marginTop:20}}>
              <TouchableOpacity>
              <Image resizeMode={'contain'} source={{ uri: 'ssdk_oks_classic_qq' }}  style={{ height: 60, width:60,marginRight:20}}/>
              </TouchableOpacity>
              <TouchableOpacity>
              <Image resizeMode={'contain'} source={{ uri: 'ssdk_oks_classic_wechat' }}  style={{ height: 60, width:60,marginLeft:20}}/>
              </TouchableOpacity>
          </View>
          <View  style = {{alignItems:'center',flex:1,justifyContent:'flex-end'}}>
              <Text style={{fontSize:12,marginBottom:10,color:'#C6C4C4'}} >版权所有©陕西师范大学</Text>
          </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ffffff',
  },
  tabText: {
    color: '#999999',
    fontSize: 10
  },
  selectedTabText: {
    color: '#AC1E1A'
  },
  instructions: {
    textAlign: 'center',
    color: '#FF0000',
    marginBottom: 5,
  },
  icon: {
    width: 20,
    height: 20
  },
  top_view:{
    flexDirection: 'row',
    paddingLeft: 10,
    paddingRight:10,
    paddingBottom:12,
    paddingTop:12,
    alignItems:'center',
    backgroundColor:'#fff',
    elevation:2
  },
  commentText:{
    padding:12,
    color:'#4e4e4e',
    textAlign:'center'
  }
});
